<script setup lang="ts">
import Header from '../login/components/Header';
import {
  Form as VeeForm,
  Field as VeeField,
  ErrorMessage as VeeErrorMessage,
  defineRule as VeeDefineRule
} from 'vee-validate';
import { useRegister, useValidate } from './composables';

const { onRegister, isLoading } = useRegister();

const {
  registerForm,
  validateUsername,
  validatePassword,
  validateConfirmPassword,
  onRegisterHandler
} = useValidate();

VeeDefineRule('validateConfirmPassword', validateConfirmPassword);
</script>

<template>
  <div
    class="relative h-screen bg-white text-center xl:bg-zinc-200 dark:bg-zinc-800"
  >
    <Header />
    <div
      class="mt-4 block px-3 py-4 xl:m-auto xl:mt-8 xl:w-[388px] xl:rounded-sm xl:bg-white xl:shadow-xl dark:bg-zinc-800 dark:xl:bg-zinc-900"
    >
      <h3
        class="text-main mb-2 hidden text-base font-semibold xl:block dark:text-zinc-300"
      >
        注册账号
      </h3>
      <VeeForm @submit="onRegisterHandler">
        <VeeField
          class="focus:border-b-main w-full border-b border-b-zinc-400 px-1 pb-1 text-base outline-0 dark:bg-zinc-800 dark:text-zinc-400 dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          type="text"
          name="username"
          placeholder="用户名"
          autocomplete="on"
          v-model="registerForm.username"
          :rules="validateUsername"
        />
        <VeeErrorMessage
          name="username"
          class="mt-0.5 block text-left text-sm text-red-600"
        />
        <VeeField
          class="focus:border-b-main w-full border-b border-b-zinc-400 px-1 pb-1 text-base outline-0 dark:bg-zinc-800 dark:text-zinc-400 dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          type="password"
          name="password"
          placeholder="密码"
          autocomplete="on"
          v-model="registerForm.password"
          :rules="validatePassword"
        />
        <VeeErrorMessage
          name="password"
          class="mt-0.5 block text-left text-sm text-red-600"
        />
        <VeeField
          class="focus:border-b-main w-full border-b border-b-zinc-400 px-1 pb-1 text-base outline-0 dark:bg-zinc-800 dark:text-zinc-400 dark:focus:border-b-zinc-200 xl:dark:bg-zinc-900"
          type="password"
          name="confirmPassword"
          placeholder="确认密码"
          autocomplete="on"
          v-model="registerForm.confirmPassword"
          rules="validateConfirmPassword:@password"
        />
        <VeeErrorMessage
          name="confirmPassword"
          class="mt-0.5 block text-left text-sm text-red-600"
        />
        <div class="pt-1 pb-3 text-right leading-[0px]">
          <a
            href="#"
            class="inline-block cursor-pointer p-1 text-right text-sm text-zinc-400 duration-300 hover:text-zinc-600 dark:text-zinc-600 dark:hover:text-zinc-400"
            @click.prevent="$router.push('/login')"
          >
            去登录
          </a>
        </div>

        <p class="text-center">
          <a
            href="https://m.imooc.com/newfaq?id=89"
            class="text-sm text-zinc-400 duration-300 dark:text-zinc-600 dark:hover:dark:text-zinc-400 hover:dark:text-zinc-600"
            target="_blank"
          >
            注册即同意协议
          </a>
        </p>
        <MButton
          class="w-full dark:bg-zinc-900 xl:dark:bg-zinc-800"
          :isActiveAnimation="false"
          :loading="isLoading"
          @click="
            () =>
              onRegister({
                username: registerForm.username,
                password: registerForm.password
              })
          "
        >
          立即注册
        </MButton>
      </VeeForm>
    </div>
  </div>
</template>
